<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="表分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryName">
              <a-input v-model="currSelectedType.categoryName == null ? model.categoryName : currSelectedType.categoryName"   disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="表名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tableName">
              <a-input v-model="model.tableName" placeholder="请输入表名"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="表编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tableCode">
              <a-input v-model="model.tableCode" placeholder="请输入表编码"  ></a-input>
              <a-button type="primary" @click="verifyDup">验证重复</a-button>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="表描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tableDesc">
              <a-textarea v-model="model.tableDesc" placeholder="请输入表描述"  ></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="表类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tableType">
              <a-radio-group default-value="FACT" v-model="model.tableType" button-style="solid">
                <a-radio-button value="MANAGED">
                  内部表
                </a-radio-button>
                <a-radio-button value="EXTERNAL">
                  外部表
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item v-if="model.tableType === 'EXTERNAL'" label="表数据源id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tableSourceId">
              <a-select  default-value=""   v-model="model.tableSourceId" >
                <a-select-option v-for="item in dbSourceOptions" :key="item.tid" :value="item.tid">
                  {{ item.sourceName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :wrapperCol="{span: 19, offset: 5}">
              <a-button type="primary" @click="nextStep">下一步</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { listCollectSource } from '@api/apiDs'
import { addDict } from '@api/api'

  export default {
    data () {
      return {
        confirmLoading: false,
        model:{},

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        dbSourceOptions:[],
        validatorRules: {
          tableName: [{ required: true, message: '请输入表名'}],
          tableCode: [{ required: true, message: '请输入表编码' }],
          tableType: [{ required: true, message: '请输入表类型'}],
        },
        url: {
          addTable:"/dcloud-platform/api/datalibLogicTable/v1/add",
          editTbale:"/dcloud-platform/api/datalibLogicTable/v1/edit"
        }
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      currSelectedType: {
        type: Object, // 根据实际数据类型定义
        required: true, // 如果这个prop是必需的，可以设置为true
      },
      addData: {
        type: Object, // 根据实际数据类型定义
        required: true, // 如果这个prop是必需的，可以设置为true
      },
    },
    name: "Step1",
    mounted() {

      // if(this.model.tableType === undefined || this.model.tableType === null){
      //   this.model.tableType = "FACT"
      // }
      this.loadSource()
    },
    watch:{
      addData:{
        deep: true,
        immediate: true,
        handler(val){
          this.model = this.addData
        }
      }},
    methods: {

      nextStep () {
        let validate = this.$refs.form.validate()
        this.$refs.form.validate(valid => {
            if (valid) {
              this.$emit('nextStep',this.model)
            }
        })

      },
      loadSource(){
        let param={"isBuildIn":1}
        listCollectSource(param).then((res) => {
          if (res.success) {
            this.dbSourceOptions = res.result
          }
        })
      },
      verifyDup(){

      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },


  }
</script>

<style scoped>

</style>